Skip to content

Conversation

@colinrotherham
Copy link
Collaborator

This PR upgrades the React components to NHS.UK frontend v10.3

The file upload component, card actions and interruption panel variant are all included

File upload component

Card actions

Interruption panel

@colinrotherham
Copy link
Collaborator Author

colinrotherham commented Jan 21, 2026

Not sure if you'd be up for reviewing this please @mikeathan-nhs?

I could do with adding some extra bits to the migration guide but the component changes are ready to review

@sonarqubecloud
Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
13.8% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

@mikeathan-nhs
Copy link

Not sure if you'd be up for reviewing this please @mikeathan-nhs?

I could do with adding some extra bits to the migration guide but the component changes are ready to review

Hi yes i can do. we have sprint ceremonies today so when i get a chance will go through the changes, Thanks

data-checkbox-exclusive-group={name}
checked={checked}
defaultChecked={defaultChecked}
data-checkbox-exclusive-group={name}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think data-checkbox-exclusive-group should be set only if exclusive prop is set too ?

{visuallyHiddenText ? (
<>
<span className="nhsuk-u-visually-hidden">{`${visuallyHiddenText}:`}</span> {children}
<span className="nhsuk-u-visually-hidden">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

although is not present in the service manual, in the Changelog they mention swap the <span class="nhsuk-error-message"> for a <p class="nhsuk-error-message">

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well spotted, thank you

return (
<search className="nhsuk-header__search">
<form className="nhsuk-header__search-form" id={id} action={action} method={method} {...rest}>
<label className="nhsuk-u-visually-hidden" htmlFor="search-field">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The search header in latest version has these two divs nhsuk-form-group and nhsuk-input wrapper inside search-form.

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants